<template>
	<div class="app-container">
		<el-form class="queryForms" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="文件名称" prop="fileName">
				<el-input v-model="queryParams.fileName" placeholder="请输入文件名称" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5" v-show="permup">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">上传</el-button>
			</el-col>
			<el-col :span="1.5" v-show="permdel">
				<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button size="mini" type="info" @click="handleBacks">返回</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button v-if="($route.query.show && $route.query.typeId == '4') || ($route.query.show && $route.query.typeId == '11')">返修任务单号：{{ $route.query.repairNumber }}</el-button>
				<el-button v-if="($route.query.show && $route.query.typeId == '5') || ($route.query.show && $route.query.typeId == '12')">产品名称：{{ $route.query.productName }}-{{ $route.query.productModel }}</el-button>
			</el-col>
			<right-toolbar menuNames="attachmentUpload" @changeTableData="changeTableData" :showSearch.sync="showSearch" @queryTable="getList" :columns.sync="columns"></right-toolbar>
		</el-row>
		<div :class="sidebar.opened && eleTabTop <= 85 ? 'eleTab' : !sidebar.opened && eleTabTop <= 85 ? 'eleTabs' : ''" class="informationTab" ref="eleTab">
			<el-table ref="table" v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" border height="100%">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="序号" align="center" type="index" width="55" />
				<el-table-column label="文件类型" prop="fileType" min-width="150" :show-overflow-tooltip="true" v-if="columns[0].visible" />
				<el-table-column label="文件名称" prop="fileName" min-width="150" :show-overflow-tooltip="true" v-if="columns[1].visible" />
				<el-table-column label="创建时间" align="center" prop="createTime" min-width="180" :show-overflow-tooltip="true" v-if="columns[2].visible" />
				<el-table-column label="上传人员" prop="createBy" min-width="150" :show-overflow-tooltip="true" v-if="columns[3].visible" />
				<el-table-column label="操作" align="left" class-name="small-padding fixed-width" fixed="right" width="200">
					<template slot-scope="scope">
						<el-button v-show="permscan" size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
						<el-button v-show="permdown" size="mini" type="text" icon="el-icon-download" @click="handledownload(scope.row)">下载</el-button>
						<el-button v-show="permdel && scope.row.canDelFlag == '1'" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<pagination menuNames="Pagination2" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<el-dialog title="附件" :visible.sync="open" width="900px" append-to-body v-dialogDrag>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="文件类型" prop="fileTypeId">
					<el-select v-model="form.fileTypeId" @change="selectFileType">
						<el-option v-for="item in typeFileLists" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="附件上传">
					<FileUpload @input="getFiles" :value="uploadList"></FileUpload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFileForm">确 定</el-button>
				<el-button @click="open = false">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog title="预览" :visible.sync="openPreview" width="1000px" append-to-body v-dialogDrag>
			<previewExcel :previewUrl="previewUrl" :previewType="previewType"></previewExcel>
		</el-dialog>
	</div>
</template>
<script>
import previewExcel from "@/views/components/previewTemplete/excels.vue"
import { fileManageList, addFile, deletefileManage } from "@/api/fileUpload"
import { fileoption } from "@/api/selectList"
import FileUpload from "@/components/FileUpload"
import { mapGetters } from "vuex"
import { getcolumn, updatecolumn } from "@/api/selectList"
export default {
	name: "attachmentUpload",
	components: { FileUpload, previewExcel },
	computed: {
		...mapGetters(["sidebar"])
	},
	data() {
		return {
			eleTabTop: 0, //表格容器距浏览器顶部距离
			openPreview: false,
			previewType: "",
			previewUrl: "",
			uploadList: [],
			rules: {},
			form: {},
			typeFileLists: [],
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 表格数据
			fileList: [],
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				fileName: null,
				fileTypeId: null,
				fileType: null
			},
			// 表单校验
			rules: {
				fileTypeId: [{ required: true, message: "文件类型不能为空", trigger: "blur" }],
				files: [{ required: true, message: "附件不能为空", trigger: "blur" }]
			},
			// 列信息
			columns: [
				{ key: 0, label: `文件类型`, visible: true },
				{ key: 1, label: `文件名称`, visible: true },
				{ key: 2, label: `创建时间`, visible: true },
				{ key: 3, label: `上传人员`, visible: true }
			],
			// 权限
			permup: true, // 上传
			permdown: true, // 下载
			permdel: true, // 删除
			permscan: true, // 预览
			routerPath: "",
			selections: []
		}
	},
	activated() {
		getcolumn({ pageName: "Pagination2" }).then(response => {
			this.queryParams.pageSize = response.data.length ? (response.data[0].limit ? response.data[0].limit : 10) : 10
			// this.$route.query.typeId && this.getList()
			this.getList()
		})

		let perm = this.$route.query.perm
		let allperm = this.$store.getters.permissions
		if (perm) {
			this.handlePerm(perm, allperm)
		}
		//获取表格容器距页面头部的距离
		this.handleScrollx()
	},
	created() {},
	mounted() {
		// 滚动条的获取
		this.handleScrollx()
		window.addEventListener("scroll", this.handleScrollx, true)
	},
	destroyed() {
		window.removeEventListener("scroll", this.handleScrollx, true)
	},
	methods: {
		changeTableData() {
			this.$nextTick(() => {
				this.$refs.table.doLayout()
			})
		},
		handleBacks() {
			const obj = { path: this.$route.path }
			this.$tab.closePage(obj).then(() => {
				// this.$router.go(-1)
				if (this.$route.query.paths == "/taskFilling/taskFill/writeContent/index" || this.$route.query.paths == "/taskFilling/taskFill/menuList/index") {
					this.$router.push({
						path: this.$route.query.paths,
						query: {
							id: this.$route.query.TableId,
							status: this.$route.query.status,
							fillingId: this.$route.query.fillingId,
							repairProductId: this.$route.query.repairProductId,
							workshopSectionId: this.$route.query.workshopSectionId,
							technologyDictCode: this.$route.query.technologyDictCode,
							processType: this.$route.query.processType,
							isWrite: this.$route.query.isWrite,
							processStatus: this.$route.query.processStatus,
							queryData: this.$route.query.queryParams,
							productName: this.$route.query.productName,
							productModel: this.$route.query.productModel,
							productNumber: this.$route.query.productNumber,
							hasShowVisible: this.$route.query.hasShowVisible,
							expandedRows: this.$route.query.expandedRows
						}
					})
				} else {
					this.$router.go(-1)
				}
			})
		},
		//获取表格容器距页面头部的距离
		handleScrollx() {
			this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top
		},
		handlePerm(perm, allperm) {
			if (allperm.indexOf("*:*:*") > -1) {
				return false
			} else {
				if (allperm.indexOf(perm + ":up") == -1) {
					this.permup = false
				}
				if (allperm.indexOf(perm + ":down") == -1) {
					this.permdown = false
				}
				if (allperm.indexOf(perm + ":scan") == -1) {
					this.permscan = false
				}
				if (allperm.indexOf(perm + ":del") == -1) {
					this.permdel = false
				}
			}
		},
		handlePreview(row) {
			this.previewUrl = row.path
			this.previewType = row.path.substr(row.path.lastIndexOf(".") + 1)
			this.openPreview = true
		},
		submitFileForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.uploadList.length) {
						this.form.fileList = this.uploadList
						this.form.id = this.$route.query.TableId
						this.form.tableNumber = this.$route.query.typeId
						addFile(this.form).then(res => {
							this.open = false
							this.$modal.msgSuccess("设置成功")
							this.getList()
						})
					} else {
						this.$modal.msgError("请先上传文件")
					}
				}
			})
		},
		selectFileType(e) {
			this.typeFileLists.forEach(element => {
				if (element.dictValue == e) {
					this.form.fileType = element.dictLabel
				}
			})
		},
		getfileoption() {
			fileoption({
				typeId: this.$route.query.typeId
			}).then(res => {
				this.typeFileLists = res.data
				this.open = true
			})
		},
		getFiles(files) {
			this.uploadList = files
		},
		/** 查询列表 */
		getList() {
			this.loading = true
			this.queryParams.tableNumber = this.$route.query.typeId
			this.queryParams.id = this.$route.query.TableId
			fileManageList(this.queryParams).then(response => {
				this.fileList = response.rows
				this.total = response.total
				this.loading = false
			})
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				fileTypeId: null,
				fileType: null,
				tableNumber: this.$route.query.typeId
			}
			this.uploadList = []
			this.resetForm("form")
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm")
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.selections = selection
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.getfileoption()
		},
		// 下载
		handledownload(row) {
			window.open(row.path)
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			let flag = this.selections.every(item => item.canDelFlag == "1")
			console.log(flag)
			if (flag) {
				const ids = row.id || this.ids
				this.$modal
					.confirm("是否确认删除附件？")
					.then(function () {
						return deletefileManage(ids)
					})
					.then(() => {
						this.getList()
						this.$modal.msgSuccess("删除成功")
					})
					.catch(() => {})
			} else {
				this.$modal.msgError("不能删除此附件")
			}
		}
	}
}
</script>
